<div class="modal" ng-controller="FlowableGroupPopupCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">&times;</button>
        <h2 translate>PROPERTY.ASSIGNMENT.TITLE</h2>
      </div>
      <div class="modal-body">
        <div class="detail-group clearfix">

          <div class="form-group clearfix">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.CANDIDATE_GROUPS' | translate}}</label>
              </div>
              <div class="col-xs-8 clearfix">
                <ul class="simple-list"
                    ng-show="popup.assignmentObject.candidateGroups.length">
                  <li ng-repeat="group in popup.assignmentObject.candidateGroups track by $index">
                    {{group.name}}
                    <div class="actions">
                      <a ng-click="removeCandidateGroup(group)"><i class="icon icon-remove"></i></a>
                    </div>
                  </li>
                </ul>
                <div class="no-results"
                     ng-if="(!popup.assignmentObject.candidateGroups || !popup.assignmentObject.candidateGroups.length)">
                  {{'PROPERTY.ASSIGNMENT.IDM.NO_CANDIDATE_GROUPS' | translate}}
                </div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.SEARCH' | translate}}</label>
              </div>
              <div class="col-xs-8">
                <input class="form-control" type="text" id="people-select-input"
                       placeholder="{{'PROPERTY.ASSIGNMENT.PLACEHOLDER-SEARCHGROUP' | translate}}" auto-focus
                       custom-keys
                       up-pressed="previousGroup()" down-pressed="nextGroup()" enter-pressed="confirmGroup()"
                       delayed-model="popup.groupFilter"
                       delay="200"/>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label></label>
              </div>
              <div class="col-xs-8">
                <div class="subtle">
                  <span translate="PROPERTY.ASSIGNMENT.MATCHING"></span>
                </div>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label></label>
              </div>
              <div class="col-xs-8">
                <div class="inline-people-select">
                  <ul class="simple-list">
                    <li ng-click="confirmGroup(group);" ng-repeat="group in popup.groupResults "
                        ng-class="{'active': $index == popup.selectedGroupIndex}">
                      {{group.name}}
                    </li>
                  </ul>
                  <div class="nothing-to-see" translate="GENERAL.MESSAGE.GROUP-NO-MATCHING-RESULTS"
                       ng-show="popup.groupResults.length == 0"></div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button ng-click="close()" class="btn btn-primary" translate>ACTION.CANCEL</button>
        <button ng-click="save()" class="btn btn-primary" translate>ACTION.SAVE</button>
      </div>
    </div>
  </div>
